<template>
	<view class="page">
		<view class="line">
			时间：<view class="timer">{{time}}</view>
			<u-button size="mini" type="warning" @click="showCalendar = true">选择时间</u-button>
		</view>
		
		<view class="line">
			分类：<view class="sort">{{sortV}}</view>
			<u-button size="mini" type="warning" @click="showSort = true">选择分类</u-button>
		</view>
		
		<view class="line">
			金额：<input type="digit" style="color: #007AFF;" v-model="money" />
		</view>
		<view class="line">
			概述：
		</view>
		<!-- 概述的输入框 -->
		<u-input class="forWhat" type="textarea" style="color: #f0f0f0;" :placeholder="tips"></u-input>
		<!-- 添加记录按钮 -->
		<u-button type="primary" @click="addRecord" >添加记录</u-button>
		<!-- 分类选择器 -->
		<u-select v-model="showSort" :list="list" @confirm="handleSort"></u-select>
		<!-- 日历 -->
		<u-calendar v-model="showCalendar" mode="date" @change="handleCalendar"></u-calendar>
	</view>
</template>

<script>
	import timerHandle from '../../utils/timeHandle.js'
	export default {
		data() {
			return {
				// 概述框的palceholder
				tips: '又花钱？',
				// 选定的时间，默认当天
				time: '',
				// 选定的分类，默认-v-
				sortV: '→.→',
				sort: null,
				// 输入的金额，默认0
				money: 0,
				// 输入的概述
				forWhat: '',
				// 控制分类选择器的打开与否
				showSort: false,
				// 控制日历的打开与否
				showCalendar: false,
				// 分类数据
				list: [
					{value: 1, label: '收入'},
					{value: 2, label: '房租'},
					{value: 3, label: '水电'},
					{value: 4, label: '吃饭'},
					{value: 5, label: '其他'}]
			}
		},
		watch:{
			sort: function(o,e) {
				const sort = this.sort
				switch(sort) {
				     case 1:
				        this.tips = '原来是搞到钱了啊，那没事了'
				        break;
				     case 2:
				        this.tips = '原来是缴房租了啊，那没事了'
				        break;
					 case 3:
						this.tips = '原来是缴水电了啊，那没事了'
						break;
					 case 4:
						this.tips = '原来是快饿死了啊，那没事了'
						break;
					 case 5:
						this.tips = '？？？你个栽种干啥了'
						break;
				     default:
				        this.tips = '又花钱？'
				}
			}
		},
		mounted() {
			// 默认返回当前的日期和0点时间戳
			const { today, stamp } = timerHandle()
			this.time = today
			console.log(today);
			console.log(stamp);
		},
		methods: {
			// 添加记录
			addRecord: function() {
				
			},
			// 选定分类
			handleSort: function(e) {
				const { label, value } = e[0]
				console.log(label);
				console.log(value);
				this.sortV = label
				this.sort = value			},
			// 选定日期
			handleCalendar: function(e) {
				// 选中的日期
				const { result } = e
				this.time = result
				// 选中的日期对应的时间戳
				const { stamp } = timerHandle(result)
				
			}
		}
	}
</script>

<style scoped>
	.line{
		display: flex;
		height: 80rpx;
		line-height: 80rpx;
		align-items: center;
	}
	.line view{
		width: 200rpx;
	}
</style>
